<template>
  <ph-view>
    <ph-blockquote type="warning">
      note： PhForm+&lt;Datetime|Date|Year|Month|Time&gt; (凡是PhForm为前缀的)
      表单组件需要以PhForm为父组件工作，如需单独使用，如下：
      <br />
      import {Ph+&lt;Datetime|Date|Year|Month|Time&gt;} from "@/index"
      用法同上但是没有验证功能, @change 替换 @ph-change
    </ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="ph-form-xxx案例">
        <ph-form>
          <ph-divider>表单datetime {{ datetime }}</ph-divider>
          <ph-form-datetime
            style="width: 300px"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />
          <ph-blockquote type="primary">
            表单datetime 限定范围
            <br />
            min="1991-09-20 12:03:34" max="1993-09-20 12:03:34"
          </ph-blockquote>
          <ph-form-datetime
            style="width: 300px"
            min="1991-09-20 12:03:34"
            max="1993-09-20 12:03:34"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />

          <ph-divider>表单date {{ date }}</ph-divider>
          <ph-form-datetime
            type="date"
            style="width: 300px"
            :value="date"
            @ph-change="onDateChange"
          />
          <ph-blockquote type="primary">
            date 限定范围
            <br />
            min="1993-09-5" max="1993-09-23"
          </ph-blockquote>
          <ph-form-datetime
            type="date"
            style="width: 300px"
            value="1993-09-10"
            min="1993-09-8"
            max="1993-09-23"
            @ph-change="onDateChange"
          />

          <ph-divider>表单year {{ year }}</ph-divider>
          <ph-form-datetime
            type="year"
            style="width: 300px"
            :value="year"
            @ph-change="onYearChange"
          />
          <ph-blockquote type="primary">
            year 限定范围
            <br />
            min="1991" max="1993"
          </ph-blockquote>
          <ph-form-datetime
            type="year"
            style="width: 300px"
            :value="year"
            min="1991"
            max="1993"
            @ph-change="onYearChange"
          />

          <ph-divider>表单year-month {{ yearmonth }}</ph-divider>
          <ph-form-datetime
            type="month"
            style="width: 300px"
            :value="yearmonth"
            @ph-change="onYearMonthChange"
          />
          <ph-blockquote type="primary">
            month 限定范围
            <br />
            min="1991-06" max="1993-09"
          </ph-blockquote>
          <ph-form-datetime
            type="month"
            style="width: 300px"
            :value="yearmonth"
            min="1991-06"
            max="1993-09"
            @ph-change="onYearMonthChange"
          />

          <ph-divider>表单time {{ time }}</ph-divider>
          <ph-form-datetime
            type="time"
            style="width: 300px"
            :value="time"
            @ph-change="onTimeChange"
          />
          <ph-blockquote type="primary">
            time 限定范围
            <br />
            min="6:30:34" max="18:00:34"
          </ph-blockquote>
          <ph-form-datetime
            type="time"
            style="width: 300px"
            :value="time"
            min="6:30:34"
            max="18:00:34"
            @ph-change="onTimeChange"
          />

          <ph-divider>自定义表单time格式 {{ time }}</ph-divider>
          <ph-form-datetime
            type="time"
            style="width: 300px"
            :value="time1"
            format="hh时mm分ss秒"
            @ph-change="onTimeChange1"
          />
          <ph-blockquote type="primary">
            time 限定范围
            <br />
            min="6时30分34秒" max="18时00分34秒"
          </ph-blockquote>
          <ph-form-datetime
            type="time"
            style="width: 300px"
            :value="time1"
            min="6时30分34秒"
            max="18时00分34秒"
            format="hh时mm分ss秒"
            @ph-change="onTimeChange1"
          />

          <ph-divider
            >并列日期范围min="6:30:34" max="18:00:34" value:{{
              time
            }}</ph-divider
          >
          <ph-form-datetime-range
            :start="time"
            min="6:30:34"
            max="18:00:34"
            type="time"
          />
          <ph-divider
            >并列日期范围min="6:30:34" max="18:00:34" value:{{
              time
            }}</ph-divider
          >
          <ph-form-datetime-cascade
            :start="time"
            min="6:30:34"
            max="18:00:34"
            type="time"
          />

          <ph-divider>表单禁止 {{ datetime }}</ph-divider>
          <ph-form-datetime
            style="width: 300px"
            :value="datetime"
            :disabled="true"
            @ph-change="onDatetimeChange"
          />

          <ph-divider
            >weekText 自定义周文字
            :weekText="['Su','Mo','Tu','We','Th','Fr','Sa']"</ph-divider
          >
          <ph-form-datetime
            type="date"
            label="weekText"
            style="width: 350px"
            :weekText="['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']"
          />
          <ph-divider
            >importants自定义重要日子
            :importants="[{title:'工资',md:'*-20'},{title:'浪',md:'*-9',desc:'去三里屯浪'}]"</ph-divider
          >
          <ph-form-datetime
            type="date"
            label="importants"
            style="width: 350px"
            :importants="[
              { title: '工资', md: '*-20' },
              { title: '浪', md: '*-9', desc: '去三里屯浪' },
            ]"
          />
          <ph-divider>clear 关闭清除按钮</ph-divider>
          <ph-form-datetime
            type="date"
            label="clear"
            style="width: 350px"
            :clear="false"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />
          <ph-divider>now 关闭现在按钮选项</ph-divider>
          <ph-form-datetime
            type="date"
            label="now"
            style="width: 350px"
            :now="false"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />

          <ph-blockquote
            >表单主题色:theme&lt;dark|light|primary|success|danger|warning&gt;></ph-blockquote
          >
          <ph-form-datetime
            type="date"
            label="默认dark"
            style="width: 350px"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />
          <ph-form-datetime
            type="date"
            label="light"
            theme="light"
            style="width: 350px"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />
          <ph-form-datetime
            type="date"
            label="primary"
            theme="primary"
            style="width: 350px"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />
          <ph-form-datetime
            type="date"
            label="success"
            theme="success"
            style="width: 350px"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />
          <ph-form-datetime
            type="date"
            label="danger"
            theme="danger"
            style="width: 350px"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />
          <ph-form-datetime
            type="date"
            label="warning"
            theme="warning"
            style="width: 350px"
            :value="datetime"
            @ph-change="onDatetimeChange"
          />

          <ph-blockquote
            >datetime双向关联min="1992-09-20 06:00:00" max="1992-12-20 06:00:00"
            start="1992-09-21 06:00:00"</ph-blockquote
          >
          <ph-form-datetime-cascade
            label="在世时间"
            min="1992-09-20 06:00:00"
            max="1992-12-20 06:00:00"
            start="1992-09-21 06:00:00"
          />
        </ph-form>
        <ph-pretty>{{ demo2 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="非ph-form案例">
        <ph-divider>表单datetime {{ datetime }}</ph-divider>
        <ph-datetime
          style="width: 300px"
          :value="datetime"
          @change="onDatetimeChange"
        />
        <ph-divider>表单date {{ date }}</ph-divider>
        <ph-datetime
          type="date"
          style="width: 300px"
          :value="date"
          @change="onDateChange"
        />
        <ph-divider>表单year {{ year }}</ph-divider>
        <ph-datetime
          type="year"
          style="width: 300px"
          :value="year"
          @change="onYearChange"
        />
        <ph-divider>表单year-month {{ yearmonth }}</ph-divider>
        <ph-datetime
          type="month"
          style="width: 300px"
          :value="yearmonth"
          @change="onYearMonthChange"
        />
        <ph-divider>表单time {{ time }}</ph-divider>
        <ph-datetime
          type="time"
          style="width: 300px"
          :value="time"
          @change="onTimeChange"
        />
        <ph-divider>自定义表单time格式 {{ time }}</ph-divider>
        <ph-datetime
          type="time"
          style="width: 300px"
          :value="time1"
          format="hh时mm分ss秒"
          @change="onTimeChange1"
        />
        <ph-divider>表单禁止 {{ datetime }}</ph-divider>
        <ph-datetime
          style="width: 300px"
          :value="datetime"
          :disabled="true"
          @change="onDatetimeChange"
        />
        <ph-divider
          >datetime双向关联min="1992-09-20 06:00:00" max="1992-12-20 06:00:00"
          start="1992-09-21 06:00:00"</ph-divider
        >
        <ph-datetime-cascade
          min="1992-09-20 06:00:00"
          max="1992-12-20 06:00:00"
          start="1992-09-21 06:00:00"
        />
        <ph-divider
          >date双向关联min="1992-09-20" max="1992-12-20"
          start="1992-09-21"</ph-divider
        >
        <ph-datetime-cascade
          theme="success"
          type="date"
          min="1992-09-20"
          max="1992-12-20"
          start="1992-09-21"
        />
        <ph-divider
          >年月month双向关联min="1992-09" max="1992-12"
          start="1992-10"</ph-divider
        >
        <ph-datetime-cascade
          theme="primary"
          type="month"
          min="1992-09"
          max="1992-12"
          start="1992-10"
        />
        <ph-divider>year双向关联min="1992" max="1996" start="1993"</ph-divider>
        <ph-datetime-cascade
          theme="danger"
          type="year"
          min="1992"
          max="1996"
          start="1993"
        />
        <ph-divider
          >time双向关联min="06:30:00" max="22:45:00"
          start="08:00:00"</ph-divider
        >
        <ph-datetime-cascade
          theme="warning"
          type="time"
          min="06:30:00"
          max="22:45:00"
          start="08:00:00"
        />
        <ph-pretty>{{ demo1 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
        <ph-blockquote type="warning">
          note：该组件内部使用<router-link to="/datetimeBtn"
            >PhDatetimeButton</router-link
          >组件，所以需要引入相关依赖，参考<router-link to="/datetimeBtn"
            >PhDatetimeButton用法</router-link
          >
        </ph-blockquote>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  PhView,
  PhTab,
  PhTabPanel,
  PhDivider,
  PhBlockquote,
  PhForm,
  PhFormDatetimeCascade,
  PhFormDatetimeRange,
  PhFormDatetime,
  PhDatetimeCascade,
  PhDatetime,
} from "@/index";

import * as Data from "../data/datetime-input";
export default defineComponent({
  components: {
    PhView,
    PhTab,
    PhTabPanel,
    PhDivider,
    PhBlockquote,

    PhForm,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,
    PhFormDatetime,

    PhDatetimeCascade,
    PhDatetime,
  },
  setup() {
    const datetime = ref("1992-09-20 12:03:34");
    const date = ref("1992-09-20");
    const year = ref("1992");
    const yearmonth = ref("1992-09");
    const time = ref("12:03:34");
    const time1 = ref("12时03分34秒");
    const onDatetimeChange = (v: string) => {
      console.log(v);
      datetime.value = v;
    };
    const onDateChange = (v: string) => {
      console.log(v);
      date.value = v;
    };
    const onYearChange = (v: string) => {
      console.log(v);
      year.value = v;
    };
    const onYearMonthChange = (v: string) => {
      console.log(v);
      yearmonth.value = v;
    };
    const onTimeChange = (v: string) => {
      console.log(v);
      time.value = v;
    };
    const onTimeChange1 = (v: string) => {
      console.log(v);
      time1.value = v;
    };
    return {
      datetime,
      onDatetimeChange,
      date,
      onDateChange,
      year,
      onYearChange,
      yearmonth,
      onYearMonthChange,
      time,
      onTimeChange,
      time1,
      onTimeChange1,
      ...Data,
    };
  },
});
</script>
